<template>
	<div class="system_notice_container" v-loading="loading">
		<el-page-header @back="$router.back()" content="公告详情" />
		<el-scrollbar>
			<h1>{{ noticeData.title }}</h1>
			<div class="attrs">
				<span>发布时间：{{ noticeData.releaseTime }}</span>
				<span>作者：{{ noticeData.author }}</span>
				<span>浏览：{{ noticeData.browseCount }}次</span>
			</div>
			<div class="content" v-html="noticeData.content"></div>
			<div class="attach" v-if="attachData.length > 0">
				<h4>附件：</h4>
				<p v-for="(item, index) in attachData" :key="index" @click="handleDownloadFile(item)">{{ item.name }}</p>
			</div>
		</el-scrollbar>
	</div>
</template>

<script>
import { journalismDetail } from '@/api/system/tbSysJournalism';
export default {
	data() {
		return {
			loading: false,
			noticeData: {}
		};
	},
	computed: {
		noticeId() {
			return this.$route.params.id || '';
		},
		attachData() {
			let attachs = this.noticeData.siteId || '';
			return attachs.isJSON() ? JSON.parse(attachs) : [];
		}
	},
	mounted() {
		this.loading = true;
		this.getNoticeDetail();
	},
	methods: {
		async getNoticeDetail() {
			let params = { id: this.noticeId, isRecord: 2 };
			let result = await journalismDetail(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.noticeData = this.$detailData(result.data);
			}
		},

		handleDownloadFile(data) {
			this.$fileUrlDownload(data.url, data.name);
		}
	}
};
</script>

<style lang="scss" scoped>
.system_notice_container {
	display: flex;
	flex-direction: column;
	height: 100%;
	.el-page-header {
		padding: 12px;
		flex-shrink: 0;
		border-bottom: solid 1px #e4e7ed;
	}
	.el-scrollbar {
		flex: 1;
		overflow: hidden;
	}
	&:deep(.el-scrollbar__view) {
		padding: 24px;
	}
	h1 {
		color: #303133;
		font-size: 24px;
		line-height: 2;
		font-weight: 500;
		text-align: center;
	}
	div.attrs {
		color: #909399;
		text-align: center;
		padding: 10px 0 16px;
		border-bottom: solid 1px #ebeef5;
		span {
			margin: 0 24px;
		}
	}
	div.content {
		color: #606266;
		font-size: 16px;
		line-height: 1.75;
		padding: 16px 0;
		&:deep(p) {
			text-indent: 2em;
			margin: 12px 0;
			&:first-child {
				margin-top: 0;
			}
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	div.attach {
		padding: 16px;
		margin-top: 24px;
		border-radius: 4px;
		border: solid 1px var(--primary-border-plain);
		background-color: var(--primary-background-plain);
		h4 {
			line-height: 1;
		}
		p {
			line-height: 1;
			cursor: pointer;
			margin-top: 16px;
			color: var(--primary-active);
			&:hover {
				color: var(--primary-hover);
			}
		}
	}
}
</style>
